<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="MyAjax.js"></script>
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: #000;
            border: 1px solid maroon;
        }
        #boss{
            width: 300px;
            height: 300px;
            background-color: gray;
            margin-top: 10px;
            font-size: 20px;

        }
    </style>
    <script>
        function btnajax() {

            $.ajax({
                url:"index",
                type:"POST",
                success:function (data) {
                    alert(data)
                }
            })
        }
        //通过hashchange事件来监听hash值的变化，直接使用onhashchange也是一样
        window.addEventListener("hashchange",function () {
            //拿到地址栏#号后的内容
            var hash=document.location.hash;
            alert(hash);

            //通过判断不同的hash值，从而请求不同的数据来渲染页面
            switch (hash){
                case "#xiaohuang":
                    $.ajax({
                        url:'xiaohuang.json',
                        success:function (result) {
                            document.getElementById('boss').innerText=result.name;

                        }
                    });
                    break;

                case "#xiaolan":
                    $.ajax({
                        url:'xiaolan.html',
                        success:function (result) {
                            document.getElementById('boss').innerHTML=result;

                        }
                    })
                    break;

                case "#mobai":
                    $.ajax({
                        url:'mobai.html',
                        success:function (result) {
                            document.getElementById('boss').innerHTML=result;

                        }
                    })
            }


        });


    </script>
</head>
<body>

<button onclick="btnajax();">点我啊</button>

<a href="#xiaohuang">小黄</a>
<a href="#mobai">摩拜</a>
<a href="#xiaolan">小蓝</a>

<div id="boss"></div>

</body>
</html>